import React, { Component } from "react";
import { Row, Col, Table, Empty } from "antd";
import { connect } from "dva";
// import PropTypes from "prop-types";
import styles from "./NoticeLogTables.less";

/*
const mockDataSource = [
  {
    noticeId: "1",
    name: "鱼雷",
    channel: "短信",
    address: "13900002222",
    status: "成功",
    sendTime: "2017-10-01 12:01",
  },
  {
    noticeId: "2",
    name: "鱼雷",
    channel: "短信",
    address: "13900002222",
    status: "失败",
    sendTime: "2017-10-01 12:01",
  },
]
*/
@connect()
class NoticeLogTable extends Component {
  columns = [
    {
      dataIndex: "receiver",
      title: "通知人",
    },
    {
      dataIndex: "channel",
      title: "渠道",
    },
    {
      dataIndex: "address",
      title: "通讯录地址",
    },
    {
      dataIndex: "noticeStatus",
      title: "状态",
      render: (v) => {
        if (v === "Y") {
          return "成功";
        } else if (v === "N") {
          return <span className={styles.fail}>失败</span>;
        }
        return v || "--";
      },
    },
    {
      dataIndex: "sendTime",
      title: "发送时间",
    },
    {
      dataIndex: "ruNoticeChannelId",
      title: "操作",
      render: (ruNoticeChannelId, record) =>
        record.noticeStatus === "N" ? (
          <a onClick={() => this.onResend(ruNoticeChannelId)}>重新发送</a>
        ) : null,
    },
  ];

  onResend = (ruNoticeChannelId) => {
    const { dispatch, taskId } = this.props;
    dispatch({
      type: "FlowHandle/reSendNoticeMessage",
      payload: {
        taskId,
        ruNoticeChannelId,
      },
    });
  };

  render() {
    const {
      content = "XX发起的流程xx，到达任务xx",
      title = "任务通知",
      type = "任务处理通知",
      noticeItems = [],
    } = this.props;
    return (
      <Row className={styles.root}>
        <Row className={styles.title} type="flex" justify="start">
          <Col>
            <span className={styles.label}>类型：</span>
            <span className={styles.value}>{type || "--"}</span>
          </Col>
          <Col>
            <span className={styles.label}>标题：</span>
            <span className={styles.value}>{title || "--"}</span>
          </Col>
          <Col>
            <span className={styles.label}>内容：</span>
            <span className={styles.value}>{content || "--"}</span>
          </Col>
        </Row>
        <Table
          className={styles.table}
          columns={this.columns}
          dataSource={noticeItems}
          rowKey="ruNoticeChannelId"
        />
      </Row>
    );
  }
}

function NoticeLogTables({ noticeLog = [] }) {
  if (!noticeLog || noticeLog.length === 0) {
    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
  }
  return noticeLog.map((logConfig) => (
    <NoticeLogTable {...logConfig} key={logConfig.type} />
  ));
}

export default NoticeLogTables;
